<template>
  <div class="container">
    <div class="topNav">
      <div class="title-top">
        <p v-if="this.$store.state.user.severUserInfo.company_code != 'LM'" style="text-align: center">{{ this.$store.state.user.severUserInfo.company_name }}社区工作者总数</p>
        <p v-if="this.$store.state.user.severUserInfo.company_code === 'LM'" >沈阳市社区工作者总数</p>
        <h2>{{ personSum}}</h2>
        <span>人</span>
      </div>
      <div class="title-top">
        <p v-if="this.$store.state.user.severUserInfo.company_code === 'LM'">沈阳市全科社工资格总数</p>
        <p v-if="this.$store.state.user.severUserInfo.company_code != 'LM'">{{ this.$store.state.user.severUserInfo.company_name }}全科社工资格总数</p>
        <h2 >{{ quanKePersonnel}}</h2>
        <span>人</span>
      </div>
    </div>
    <div class="content">
          <Card style="margin-top: 20px;width: 49%;display: inline-block;margin-right: 2%;background-color: #f8f8f8">
            <Row>
              <Col span="12">
                <person-sum-pie-echart :width="echartWidth2" :height="400" ref="echart2"></person-sum-pie-echart>
              </Col>
            </Row>
          </Card>
      <Card style="margin-top: 20px;width: 49%;display: inline-block;background-color: #f8f8f8">
        <Row>
          <Col span="12">
            <person-sum-bar-echart :width="echartWidth1" :height="400" ref="echart1"></person-sum-bar-echart>
          </Col>
        </Row>
      </Card>
    </div>
  </div>
</template>

<script>
import { getRegionPersonSumList, getQuanKePersonnel } from '@/api/eventlist'
import PersonSumBarEchart from './compoments/person-sum-bar-echart'
import PersonSumPieEchart from './compoments/person-sum-pie-echart'
export default {
  name: 'mainv4',
  components: {
    PersonSumBarEchart,
    PersonSumPieEchart
  },
  data () {
    return {
      echartWidth1: document.documentElement.clientWidth * 0.4-40 ,
      echartWidth2: document.documentElement.clientWidth * 0.4-40 ,
      dataInfo:{},
      personSum: 0,
      quanKePersonnel: 0
    }
  },
  computed: {},
  methods: {
    thousands (num){
      const str = num.toString();
      const reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
      return str.replace(reg,"$1,");
    },
    init () {
      getRegionPersonSumList().then(ret => {
        if (ret.data.errcode === 0) {
          this.dataInfo = ret.data.data
          let number = 0
          this.dataInfo.forEach(function (temp,index) {
            number= number + temp.number
          })
          this.personSum = this.thousands(number)
          this.$refs.echart1.chart(this.dataInfo)
          this.$refs.echart2.chart(this.dataInfo)
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    getQuanKePersonnel() {
      getQuanKePersonnel().then(res => {
        if (res.data.errcode === 0) {

          this.quanKePersonnel = this.thousands(res.data.data.sum)
        }
      })
    }
  },
  mounted (){
    this.init()
    this.getQuanKePersonnel()
    console.log(this.$store.state.user.severUserInfo)
  },
  watch: {
  }
}
</script>

<style scoped lang="less">
.container{
  padding: 20px;
  background-color: #FFFFFF;
  border-radius: 10px;
  .topNav{
    background: url('../../../assets/images/homeBG.png');
    height: 140px;
    background-size : 100% 100%;
    .title-top{
      display: inline-block;
      p{
        padding-top: 40px;
        font-size: 14px;
        text-align: left;
        color: #161616;
        margin-left: 50px;
      }
      h2{
        margin-left: 50px;
        display: inline-block;
        font-size: 36px;
        text-align: left;
        color: #b40001;
      }
      span{
        font-size: 10px;
        text-align: left;
        color: #c9c9c9;
        margin-left: 5px;
      }
    }
  }
}
</style>
